<template>
  <a-drawer :width="800" :visible="visible" title="设置列表列" @close="cancel">
    <div class="add-btn">
      <a-button type="primary" @click="add">添加字段</a-button>
    </div>
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :rowKey="record => record.dataIndex + record.title"
    >
      <template #handler="row">
        <a-row type="flex" justify="space-around">
          <a-button type="primary" @click="edit(row)">编辑</a-button>
          <a-button type="danger" @click="del(row)">删除</a-button>
        </a-row>
      </template>
      <template #ellipsis="{ record }">{{ record.ellipsis === 0 ? '否' : '是' }}</template>
      <template #width="{ record }">{{ record.width || '-' }}</template>
    </a-table>
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }"
    >
      <a-button style="margin-right: 8px" @click="reset">重置</a-button>
      <a-button type="primary" @click="cancel">返回</a-button>
    </div>
  </a-drawer>
  <!-- 编辑 -->
  <column-detail
    v-if="editColumn.visible"
    v-model:visible="editColumn.visible"
    :form="editColumn.form"
    @edit-column="confirmUpdate"
  ></column-detail>
  <!-- 添加 -->
  <column-detail
    v-if="addColumn.visible"
    v-model:visible="addColumn.visible"
    :form="addColumn.form"
    @add-column="confirmUpdate"
  ></column-detail>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from 'vue';
import { Modal } from 'ant-design-vue';
import ColumnDetail from './ColumnDeatil';
import _ from 'lodash-es';

const staic = {
  columns: [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '字段',
      dataIndex: 'dataIndex',
      key: 'dataIndex',
    },
    {
      title: '宽度',
      dataIndex: 'width',
      key: 'width',
      slots: {
        customRender: 'width',
      },
    },
    {
      title: '字段',
      dataIndex: 'ellipsis',
      key: 'ellipsis',
      slots: {
        customRender: 'ellipsis',
      },
    },
    {
      title: '操作',
      dataIndex: 'handler',
      slots: {
        customRender: 'handler',
      },
      width: '200px',
      key: 'handler',
    },
  ],
};
export default defineComponent({
  components: { ColumnDetail },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  emits: ['update:data', 'update:visible'],
  setup(props, { emit }) {
    const { data } = toRefs(props);
    const state = reactive({
      dataSource: _.cloneDeep(data.value),
      addColumn: {
        visible: false,
        form: {
          index: undefined,
          dataIndex: '',
          title: '',
          width: '',
          ellipsis: 0,
        },
      },
      editColumn: {
        visible: false,
        form: {
          index: undefined,
          dataIndex: '',
          title: '',
          width: '',
          ellipsis: 0,
        },
      },
    });
    watch(
      () => state.dataSource,
      key => {
        emit('update:data', _.cloneDeep(key));
      },
      { deep: true },
    );
    const del = row => {
      Modal.confirm({
        title: '确定删除？',
        onOk() {
          state.dataSource.splice(row.index, 1);
        },
      });
    };
    const edit = row => {
      const {
        index,
        record: { dataIndex, title, width, ellipsis },
      } = row;
      state.editColumn = {
        visible: true,
        form: {
          dataIndex,
          title,
          width,
          ellipsis,
          index,
        },
      };
    };
    const add = () => {
      state.addColumn.visible = true;
    };
    const cancel = () => {
      emit('update:visible', false);
    };
    const reset = () => {
      Modal.confirm({
        title: '确定后列表内所有数据都会被清空',
        content: '确定重置？',
        onOk() {
          state.dataSource = [];
        },
      });
    };
    const confirmUpdate = form => {
      const { dataIndex, title, width, ellipsis, index } = form;
      if (index !== undefined) {
        state.dataSource[index] = { dataIndex, title, width, ellipsis };
      } else {
        state.dataSource[state.dataSource.length] = { dataIndex, title, width, ellipsis };
      }
    };
    return {
      ...toRefs(state),
      ...staic,
      cancel,
      del,
      edit,
      add,
      reset,
      confirmUpdate,
    };
  },
});
</script>
<style lang="less" scoped>
.add-btn {
  margin-bottom: 20px;
}
</style>
